import React, { Component, useState, useEffect, useRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd'
import axios from 'axios'
const Login = (props) => {
  const userRef = useRef()
  const pwdRef = useRef()
  const navigage = useNavigate()
  return (
    <div>
      账号: <input type="text" ref={userRef} />
      密码：
      <input type="text" ref={pwdRef} />
      <Button
        onClick={() => {
          const username = userRef.current.value
          const password = pwdRef.current.value
          console.log(username, 'password:', password)
          axios.post('/api/login', { username, password }).then((res) => {
            if (res.data.code === 0) {
              window.localStorage.setItem('token', res.data.data.token)
              window.localStorage.setItem('userInfo', JSON.stringify(res.data.data.userInfo))
              navigage('/admin')
            }
          })
        }}
      >
        提交
      </Button>
      {/* <input
        type="text"
        value={userInfo.username}
        onChange={(e) => {
          console.log(e.target.value, 'username')
          setUserInfo({ ...userInfo, username: e.target.value })
        }}
      />
      密码:
      <input
        type="text"
        value={userInfo.password}
        onChange={(e) => {
          console.log(e.target.value, 'password')
          setUserInfo({ ...userInfo, password: e.target.value })
        }}
      /> */}
    </div>
  )
}

export default Login
